<!DOCTYPE HTML>
<html lang="en">


<head>
    <meta charset="utf-8">
    <meta name="keywords" content="Javascript笔试刷题小结（四）, Casey Lu&#39;s Blog">
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit|ie-stand|ie-comp">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <title>Javascript笔试刷题小结（四） | Casey Lu&#39;s Blog</title>
    <link rel="icon" type="image/png" href="/medias/maozhao.png">

    <link rel="stylesheet" type="text/css" href="/libs/awesome/css/all.css">
    <link rel="stylesheet" type="text/css" href="/libs/materialize/materialize.min.css">
    <link rel="stylesheet" type="text/css" href="/libs/aos/aos.css">
    <link rel="stylesheet" type="text/css" href="/libs/animate/animate.min.css">
    <link rel="stylesheet" type="text/css" href="/libs/lightGallery/css/lightgallery.min.css">
    <link rel="stylesheet" type="text/css" href="/css/matery.css">
    <link rel="stylesheet" type="text/css" href="/css/my.css">

    <script src="/libs/jquery/jquery.min.js"></script>
    
<meta name="generator" content="Hexo 4.2.0"><link rel="alternate" href="/atom.xml" title="Casey Lu's Blog" type="application/atom+xml">
<link rel="stylesheet" href="/css/prism-tomorrow.css" type="text/css"></head>


<body>
    <header class="navbar-fixed">
    <nav id="headNav" class="bg-color nav-transparent">
        <div id="navContainer" class="nav-wrapper container">
            <div class="brand-logo">
                <a href="/" class="waves-effect waves-light">
                    
                    <img src="/medias/logo.png" class="logo-img" alt="LOGO">
                    
                    <span class="logo-span">Casey Lu's Blog</span>
                </a>
            </div>
            

<a href="#" data-target="mobile-nav" class="sidenav-trigger button-collapse"><i class="fas fa-bars"></i></a>
<ul class="right nav-menu">
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/" class="waves-effect waves-light">
      
      <i class="fas fa-home" style="zoom: 0.6;"></i>
      
      <span>Index</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/tags" class="waves-effect waves-light">
      
      <i class="fas fa-tags" style="zoom: 0.6;"></i>
      
      <span>Tags</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/categories" class="waves-effect waves-light">
      
      <i class="fas fa-bookmark" style="zoom: 0.6;"></i>
      
      <span>Categories</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/archives" class="waves-effect waves-light">
      
      <i class="fas fa-archive" style="zoom: 0.6;"></i>
      
      <span>Archives</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/about" class="waves-effect waves-light">
      
      <i class="fas fa-user-circle" style="zoom: 0.6;"></i>
      
      <span>About</span>
    </a>
    
  </li>
  
  <li>
    <a href="#searchModal" class="modal-trigger waves-effect waves-light">
      <i id="searchIcon" class="fas fa-search" title="Search" style="zoom: 0.85;"></i>
    </a>
  </li>
</ul>

<div id="mobile-nav" class="side-nav sidenav">

    <div class="mobile-head bg-color">
        
        <img src="/medias/logo.png" class="logo-img circle responsive-img">
        
        <div class="logo-name">Casey Lu's Blog</div>
        <div class="logo-desc">
            
            Never really desperate, only the lost of the soul.
            
        </div>
    </div>

    

    <ul class="menu-list mobile-menu-list">
        
        <li class="m-nav-item">
	  
		<a href="/" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-home"></i>
			
			Index
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/tags" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-tags"></i>
			
			Tags
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/categories" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-bookmark"></i>
			
			Categories
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/archives" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-archive"></i>
			
			Archives
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/about" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-user-circle"></i>
			
			About
		</a>
          
        </li>
        
        
    </ul>
</div>

        </div>

        
    </nav>

</header>

    
<script src="/libs/cryptojs/crypto-js.min.js"></script>
<script>
    (function() {
        let pwd = '';
        if (pwd && pwd.length > 0) {
            if (pwd !== CryptoJS.SHA256(prompt('嘻嘻嘻，访问本文章需要密码')).toString(CryptoJS.enc.Hex)) {
                alert('密码错误哦~');
                location.href = '/';
            }
        }
    })();
</script>




<div class="bg-cover pd-header post-cover" style="background-image: url('/medias/articleimages/25.jpg')">
    <div class="container" style="right: 0px;left: 0px;">
        <div class="row">
            <div class="col s12 m12 l12">
                <div class="brand">
                    <h1 class="description center-align post-title">Javascript笔试刷题小结（四）</h1>
                </div>
            </div>
        </div>
    </div>
</div>




<main class="post-container content">

    
    <link rel="stylesheet" href="/libs/tocbot/tocbot.css">
<style>
    #articleContent h1::before,
    #articleContent h2::before,
    #articleContent h3::before,
    #articleContent h4::before,
    #articleContent h5::before,
    #articleContent h6::before {
        display: block;
        content: " ";
        height: 100px;
        margin-top: -100px;
        visibility: hidden;
    }

    #articleContent :focus {
        outline: none;
    }

    .toc-fixed {
        position: fixed;
        top: 64px;
    }

    .toc-widget {
        width: 345px;
        padding-left: 20px;
    }

    .toc-widget .toc-title {
        margin: 35px 0 15px 0;
        padding-left: 17px;
        font-size: 1.5rem;
        font-weight: bold;
        line-height: 1.5rem;
    }

    .toc-widget ol {
        padding: 0;
        list-style: none;
    }

    #toc-content {
        height: calc(100vh - 250px);
        overflow: auto;
    }

    #toc-content ol {
        padding-left: 10px;
    }

    #toc-content ol li {
        padding-left: 10px;
    }

    #toc-content .toc-link:hover {
        color: #42b983;
        font-weight: 700;
        text-decoration: underline;
    }

    #toc-content .toc-link::before {
        background-color: transparent;
        max-height: 25px;
    }

    #toc-content .is-active-link {
        color: #42b983;
    }

    #toc-content .is-active-link::before {
        background-color: #42b983;
    }

    #floating-toc-btn {
        position: fixed;
        right: 15px;
        bottom: 76px;
        padding-top: 15px;
        margin-bottom: 0;
        z-index: 998;
    }

    #floating-toc-btn .btn-floating {
        width: 48px;
        height: 48px;
    }

    #floating-toc-btn .btn-floating i {
        line-height: 48px;
        font-size: 1.4rem;
    }
</style>
<div class="row">
    <div id="main-content" class="col s12 m12 l9">
        <!-- 文章内容详情 -->
<div id="artDetail">
    <div class="card">
        <div class="card-content article-info">
            <div class="row tag-cate">
                <div class="col s7">
                    
                    <div class="article-tag">
                        
                            <a href="/tags/Javascript/">
                                <span class="chip bg-color">Javascript</span>
                            </a>
                        
                            <a href="/tags/Leetcode/">
                                <span class="chip bg-color">Leetcode</span>
                            </a>
                        
                            <a href="/tags/%E7%AE%97%E6%B3%95/">
                                <span class="chip bg-color">算法</span>
                            </a>
                        
                    </div>
                    
                </div>
                <div class="col s5 right-align">
                    
                    <div class="post-cate">
                        <i class="fas fa-bookmark fa-fw icon-category"></i>
                        
                            <a href="/categories/%E7%AC%94%E8%AF%95%E9%9D%A2%E8%AF%95/" class="post-category">
                                笔试面试
                            </a>
                        
                    </div>
                    
                </div>
            </div>

            <div class="post-info">
                
                <div class="post-date info-break-policy">
                    <i class="far fa-calendar-minus fa-fw"></i>Publish Date:&nbsp;&nbsp;
                    2020-03-28
                </div>
                

                

                
                <div class="info-break-policy">
                    <i class="far fa-file-word fa-fw"></i>Word Count:&nbsp;&nbsp;
                    692
                </div>
                

                

                
            </div>

        </div>
        <hr class="clearfix">
        <div class="card-content article-card-content">
            <div id="articleContent">
                <p>最近在准备美团的笔试<img class="emoji" draggable="false" alt="✏️" src="https://twemoji.maxcdn.com/v/12.1.5/72x72/270f.png"/>，本来就想着继续刷心爱的leetcode，但是看了下是在赛码网OJ，<img class="emoji" draggable="false" alt="😑" src="https://twemoji.maxcdn.com/v/12.1.5/72x72/1f611.png"/>，发现并不是直接写函数体那样，输入输出要有所改变，#%￥……@%#&amp;@#*&amp;^%$<br>
输入(按行)： <code>read_line()</code><br>
输出：<code>print()</code> 和 <code>console.log()</code><br>
多行输入：</p>
<pre class=" language-language-javascript"><code class="language-language-javascript">// A + B 示例：
while(line = read_line()){
  var row = line.split('') // 划分为数组，内容是字符，如果需要数字手动转化
  console.log(parseInt(row[0]) + parseInt(row[1]))
}
</code></pre>
<pre class=" language-language-javascript"><code class="language-language-javascript">// 输入两行，一行数目，一行数组，但读入的都是字符串
var line1 = read_line()
var line2 = read_line()
var n = parseInt(line1)  // 数目
var arr = line2.split(' ')  // 数组
</code></pre>
<p><a href="https://www.cnblogs.com/carolina/p/5875479.html" target="_blank" rel="noopener">https://www.cnblogs.com/carolina/p/5875479.html</a></p>
<h2 id="1、赛码网OJ-翻转数组">1、赛码网OJ.翻转数组</h2>
<p><strong>题目：</strong> 给定一个长度为n的整数数组a，元素均不相同，问数组是否存在这样一个片段，只将该片段翻转就可以使整个数组升序排列。其中数组片段[l,r]表示序列a[l], a[l+1], …, a[r]<br>
<img src="https://img-blog.csdnimg.cn/2020032014163880.png" alt="翻转数组"></p>
<pre class=" language-language-javascript"><code class="language-language-javascript">var line1 = read_line()
var line2 = read_line()
var n = parseInt(line1)  // 数目
var arr = line2.split('').map(Number)  // 数组
var isReverseArray = function(n, arr){
  let index = 1
  while(index < n && arr[index] > arr[index-1]){// 升序
    index ++
  }
  let left = index-1 // 记录升序的最后一个位置
  while(index < n && arr[index] < arr[index-1]){// 降序
    index ++
  }
  let right = index
  if(arr[left] > arr[right]){ // 倒序之后，衔接不上，不再升序
    console.log("no")
  }
  while(index < n && arr[index] > arr[index-1]){
    index ++
  }
  if(index == n){
    console.log("yes")
  }else{
    console.log("no")
  }
}   
isReverseArray(n, arr)
</code></pre>
<h2 id="2、赛码网OJ-约德尔测试">2、赛码网OJ.约德尔测试</h2>
<p><strong>思路：</strong> 先使用正则式匹配将第一个字符串中的数据翻译成二进制串，之后和第二个字符串比较匹配个数，计算匹配率, over ~<img class="emoji" draggable="false" alt="😄" src="https://twemoji.maxcdn.com/v/12.1.5/72x72/1f604.png"/></p>
<pre class=" language-language-javascript"><code class="language-language-javascript">var str1 = read_line()
var str2 = read_line()
var reg = /[0-9a-zA-Z]/
var temp = ''
for(let i = 0 ; i < str1.length; i++){
  if(reg.test(str1[i])){
    temp += '1'
  }else{
    temp += '0'
  }
} 
var cnt = 0
for(let i = 0; i < str1.length; i++){
  if(res[i] === str2[i]){
    cnt ++
  }
}
console.log((count/str1.length*100).toFixed(2) + '%')

</code></pre>
<h2 id="3、赛码网OJ-分苹果">3、赛码网OJ.分苹果</h2>
<p><strong>思路：</strong> 关于一群傻熊熊分苹果，我掉进了一个误区，就是逆向去利用最后一个熊熊只能分到一个苹果去计算最初的苹果，也就是迭代（（N + 1） * N + 1 ） * N + 1， 实际上，这样的苹果虽然正序也可以分成这样的结果，但是不能够就认为最后一只熊至少有一只苹果~ 而是要考虑再划分N等份的过程中，是否能够满足 1）每次对N取余都是1 ，2）并且剩下的N-1份给了下一只后还能够继续划分下去的问题，因此解决的方法是穷举i去计算i在2）中是否依旧N次平分时都满足条件1）和2）</p>
<pre class=" language-language-javascript"><code class="language-language-javascript">var n = read_line()
n = parseInt(n)
var cnt // 当前的苹果数目
for(let i = n+1; ; i++){
  cnt = i
  for(let j = 1; j <= n; j ++){
    // 模拟划分N次的迭代过程
    cnt = ( cnt - 1 ) / n * (n-1)
  }
  if(Math.floor(cnt) === cnt && cnt !== 0){
    // 判定划分之后的数目是整数，并且最后一只熊还能分到非0个
    console.log(i)
    // 满足题意，此时的i就是我们要找的最少苹果数目
    break;
  }
}
</code></pre>
<p>但非常不幸的是，这个题在OJ上面因为超时只AC了（75%），所以仔细看了下，发现在迭代过程中确实时间复杂度偏高了,都没有判断当前苹果数是否满足对N取余是1就直接下一次了，傻乎乎<br>
改进版如下：</p>
<pre class=" language-language-javascript"><code class="language-language-javascript">var n = read_line()
n = parseInt(n)
for(let i = n+1; ; i++){
  let cnt = i // 初始苹果数目
  let successsBear = 0
  while(successBear < n){
    if(cnt % n == 1){
      // 满足本次划分的条件，去掉扔的一个和当前熊熊留下的那份，进入下一次
      cnt -= (cnt - 1) / n + 1 
      successBear ++  // 成功分好苹果的熊数
    }else{
      // 不满足，终止当前迭代，继续穷举i      
      break;
    }
  }
  if(successBear === n){
    console.log(i) // 输出满足N次划分的最小苹果数目
    break
  }
}
</code></pre>
<p>更惊艳的是，大佬的数列递推公式：<br>
<img src="https://img-blog.csdnimg.cn/20200321221140820.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODczNzEw,size_16,color_FFFFFF,t_70" alt="分苹果问题的推到公式"><br>
所以这个题分分钟变成了数列问题，太<img class="emoji" draggable="false" alt="🐮" src="https://twemoji.maxcdn.com/v/12.1.5/72x72/1f42e.png"/>了：</p>
<pre class=" language-language-javascript"><code class="language-language-javascript">console.log(n**n - n + 1)
</code></pre>
<p>一句话,over~<img class="emoji" draggable="false" alt="😻" src="https://twemoji.maxcdn.com/v/12.1.5/72x72/1f63b.png"/></p>
<h2 id="4、Leetcode-365-水壶问题">4、Leetcode 365. 水壶问题</h2>
<p>还是我脑子有问题吧，看到这个题最开始画了半天图解，怎么也操作不出示例的结果… 然后看了题解，才明白出题的意图，原来在使用水壶度量水的过程中根本不在乎已经衡量好的水放在哪里，不一定在壶里，只是最后要用x和y壶来装，并且壶也是可以随便清空的，所以换成数学思维解答就比较简单了。<br>
<img src="https://img-blog.csdnimg.cn/20200321163245326.png" alt="这个题示例半天。。。"><br>
<strong>思路：</strong> 无论是怎样操作，我们的操作对于水量的影响无非是<code>+x、x、+y、-y</code>。所以可以将本题进行一个转化，目标：找到一对整数，使得<code>ax + by = z</code>，只要满足<code>z &gt;= x + y</code> 且存在这样的 a,b, 就可以返回True了, 如何判断是否存在a,b呢，我们就需要寻找x,y的最大公约数，假设<code>k = Math.gcd(x,y)</code>,那么原式就变为，寻找满足a<em>m</em>k + b<em>n</em>k = z的a和b是否存在，我们可以变相的寻找<code>am+nb</code>是否存在(通过判断z能否整除k，也即<code>z%k === 0 ？</code>)，JS中没有内置的计算最大公约数的函数，所以要自己写下</p>
<pre class=" language-language-javascript"><code class="language-language-javascript">var canMeasureWater = function(x, y, z){
  if(x + y < z){ 
    // 两个都装满都小于z，必然不可以
    return false
  }
  if(x === 0 || y === 0){
    // 其中一个为空壶，判断是否z为0或者另一个壶恰好等于z
    return z === 0 || x + y === z
  }
  // 是否有a,b存在
  return z % gcd(x,y) === 0
}
var gcd = function(a, b){
  return b === 0 ? a : gcd(a, a%b)
}
</code></pre>
<p><img class="emoji" draggable="false" alt="💬" src="https://twemoji.maxcdn.com/v/12.1.5/72x72/1f4ac.png"/><strong>插播题外话</strong>：做到这里突然就想感慨一下，不愧是“学好数理化，走遍…” ，巧用数学节省了好多行代码，看来我要研读一下被我加入书单多年的《数学之美》了，当然这也需要有一颗clever的小脑袋，cc没有<img class="emoji" draggable="false" alt="🙅" src="https://twemoji.maxcdn.com/v/12.1.5/72x72/1f645.png"/><img class="emoji" draggable="false" alt="🙅" src="https://twemoji.maxcdn.com/v/12.1.5/72x72/1f645.png"/><img class="emoji" draggable="false" alt="🙅" src="https://twemoji.maxcdn.com/v/12.1.5/72x72/1f645.png"/>三重否定！</p>
<h2 id="5、Leetcode-945-使数组唯一的最小增量">5、Leetcode 945. 使数组唯一的最小增量</h2>
<p><strong>思路：</strong> 使用先对数组进行排序，遍历数组，如果当前遍历元素等于前面一个元素（<code>a[i] == a[i-1]</code>说明重复了），将当前元素加一，避免重复;还有一种情况就是当前元素小于上一个元素，因为有2次以上重复的时候，第二个元素已经为了避免重复增大过，这种情况下，还是将当前元素增大，增大到比前面的元素还要大一的数值。其实两种情况下，虽然增值不同，但是都是以前一个元素作为增加依据，当前元素的增值始终是A[i-1] - A[i] + 1，所以代码就很简单了。</p>
<pre class=" language-language-javascript"><code class="language-language-javascript">var minIncrementForUnique = function(A){
  A = A.sort((a,b) => a-b)
  let count = 0
  for(let i = 0; i < A.length; i++){
    if(A[i] <= A[i-1]){
      count += A[i-1] - A[i] + 1
      A[i] = A[i-1] + 1
    }
  }
  return count
}
</code></pre>
<h2 id="5、剑指Offer-17-16-按摩师">5、剑指Offer 17.16. 按摩师</h2>
<p><strong>思路：</strong> 就是记录每次能使得工作时长最高的一种选择，并且将这个选择作为last继续遍历并记录</p>
<pre class=" language-language-javascript"><code class="language-language-javascript">var massage = function(nums){
  let last = 0, next = 0
  nums.forEach((item) =>{
    let temp = Math.max(next, last+item)
    last = next
    next = temp
  })
  return next
}
</code></pre>
<h2 id="6、Leetcode-999-车的可用捕获量">6、Leetcode 999. 车的可用捕获量</h2>
<p><strong>思路：</strong> （本来作为象棋小白很慌张，但发现题目其实不需要任何象棋基础。）主要的思路其实就是：确定车的位置 -&gt; 上下左右移动车 -&gt; 碰到边缘则停止变色 -&gt; 若是碰到卒,记录count++</p>
<pre class=" language-language-javascript"><code class="language-language-javascript">var numRookCaptures = function(board){
  let cnt = 0
  let xIndex= 0, yIndex = 0
  // 遍历寻找白车
  for(let i = 0; i < 8; i ++){
    for(let j = 0; j < 8; j++){
      if(board[i][j] == 'R'){
        xIndex = i
        yIndex = j
        break
      }
    }
  }
  // 定义移动的方向
  dx = [0, 1, 0, -1]
  dy = [1, 0, -1, 0]
  // 分别尝试上下左右四个方向的移动
  for(let i = 0; i < 4; i++){
    for(let step = 0; ;step ++){
      const xNewIndex = xIndex + step*dx[i]
      const yNewIndex = yIndex + step*dy[i]
      if(xNewIndex < 0 || xNewIndex > 8 || yNewIndex < 0 || yNewIndex > 8 || board[tx][ty] === 'B'){
        // 超出范围或者有白色象阻拦
        break
      }
      if(board[xNewIndex][yNewIndex] == 'p'){
        cnt ++
        break
        // 这个方向已经不能继续搜查了
      }
    }
  }
  return cnt
}
</code></pre>
<h2 id="7、Leetcode-892-三维形体的表面积">7、Leetcode 892. 三维形体的表面积</h2>
<p>这道题还蛮有意思的，我挺喜欢<img class="emoji" draggable="false" alt="😝" src="https://twemoji.maxcdn.com/v/12.1.5/72x72/1f61d.png"/>，想起了<img class="emoji" draggable="false" alt="🎮" src="https://twemoji.maxcdn.com/v/12.1.5/72x72/1f3ae.png"/><em>《我的世界》</em>，做这道题就需要空间的逻辑思维能力了，最好还是动手画下。主要有两种思路——做<img class="emoji" draggable="false" alt="➕" src="https://twemoji.maxcdn.com/v/12.1.5/72x72/2795.png"/>法和做<img class="emoji" draggable="false" alt="➖" src="https://twemoji.maxcdn.com/v/12.1.5/72x72/2796.png"/>法，思想等同于我们初中计算一个形状不确定的立方体表面积，我们需要寻找的是露在外面的面数。</p>
<p><strong>思路一：减去柱间重叠的面积</strong>  每个立方体有6个面，n个立方体便是6n个面。但是每有一对立方体接触，那么就会减少两个面，假设e对立方体相互接触，那么表面积就是<code>6n-2e</code>。<br>
而接触的情况无非是两种，<strong>柱内上下叠加</strong> 和 <strong>柱间相邻</strong>：</p>
<ul>
<li>v个立方体的柱子内部，有<code>v-1</code>个接触面</li>
<li>高度分别为v、k的两个立方体之间的接触面是<code>min(v,k)</code></li>
</ul>
<pre class=" language-language-javascript"><code class="language-language-javascript">var surfaceArea = function(grid){
  let N = grid.length // 网格的规格
  let n = 0, e = 0 // 记录立方体的个数和接触面数目
  // 遍历记录n和e
  for(let i = 0; i < N; i++){
    for(let j = 0; j < N; j++){
      // 记录立方体的块数
      n += grid[i][j]
      // 记录接触面的数目
      if(grid[i][j] <= 0){        
        continue // 进入下一次循环
      }
      // 柱内上下叠加
      e += grid[i][j] - 1
      // 柱间相邻的情况，按照遍历的顺序，只考虑上柱子和左柱子，min(v,k)
      if(i > 0){
        e += Math.min(grid[i-1][j],grid[i][j])
      }
      if(j > 0){
        e += Math.min(grid[i][j-1],grid[i][j])
      }
    }
  }
  return 6*n-2*e 
}
</code></pre>
<p><strong>思路二：加上柱子露出的面积</strong> 一次计算每个柱子的表面积，<code>（i,j）</code>位置上的柱子高度为<code>v</code>,对v进行判断：<br>
首先，判断：<code>v &gt; 0</code> ？柱子存在，顶部和底部的面积确定为2。其实主要考虑侧面积，前后左右四个侧面，举例左侧面积，也就三种情况：</p>
<ul>
<li>如果柱子位于整个网格的左侧or左侧无柱子<code>left.v=0</code>，那么左侧的表面积为v;</li>
<li>柱子比左侧矮，左侧会被遮挡，左侧表面积为0；</li>
<li>柱子比左侧高，左侧露出的表面积为<code>v - left.v</code><br>
以上情况用一个伪表达式表示就是：<br>
<code>areaLeft = indexY - 1 &gt;= 0 ? max(v - left.v, 0 ) : v</code></li>
</ul>
<pre class=" language-language-javascript"><code class="language-language-javascript">var surfaceArea = function(grid){
  let N = grid.length
  let res = 0
  for(let i = 0; i < N; i++){
    for(let j = 0; j < N; j++){
      // 判断有无柱子
      if(grid[i][j] === 0){
        continue // 无柱子，遍历下一个
      }
      // 有柱子，加上顶部和底部的表面积
      res += 2
      // 前侧(平面表格上方向)表面积
      res += i-1 >= 0? Math.max(grid[i][j] - grid[i-1][j], 0): grid[i][j]
      // 后侧(平面表格下方向)表面积
      res += i + 1 < N? Math.max(grid[i][j] - grid[i+1][j], 0): grid[i][j]
       // 左侧表面积
      res += j-1 >= 0? Math.max(grid[i][j] - grid[i][j-1], 0): grid[i][j]
      // 左侧表面积
      res += j+1 < N? Math.max(grid[i][j] - grid[i][j+1], 0): grid[i][j]
    }
  }
  return res
};
</code></pre>
<p>相比之下，我觉得思路一实现起来会更加简单些，毕竟情况比较少, 加面积的这种要考虑四个方向侧面积的三种情况总的来说要相对复杂些<img class="emoji" draggable="false" alt="💫" src="https://twemoji.maxcdn.com/v/12.1.5/72x72/1f4ab.png"/></p>
<h2 id="8、Leetcode-914-卡牌分组">8、Leetcode 914. 卡牌分组</h2>
<p>题意就是希望卡牌能够分为，一组X个，并且组内X个牌的数字都一样，存在这样的X 且 X ≥ 2就可以返回true<br>
<strong>思路：</strong> 依照上面的题意，我们就是需要找能恰好分组的情况，那这个判断依据就是每种牌的数目<code>count[i]</code>和X的整除关系了，只要各类的牌数都能整除X且<code>X &gt;=2</code> 就可以了。统计每种牌的数目我选择的是Hash, 但是我们的整除关系判定不建议从X出发去遍历count，最好的办法就是计算所有count的最大公约数gcd，看是否满足大于等于2，全部满足的话，可以成功实现分组</p>
<pre class=" language-language-javascript"><code class="language-language-javascript">var hasGroupSizeX = function(deck){
  let map = new Map()
  for(let count of dack){
    map.set(n, map.has(n)?map.get(n)+1:1)
  }
  let arr = [...map.values()]
  let res = arr[0]
  return arr.every(item => (res = gcd(res, item)) > 1)
}
let gcd = (a, b) => (b == 0? a: gcd(b, a%b))
</code></pre>
<h2 id="9、字符串前缀的判断">9、字符串前缀的判断</h2>
<p><strong>题目描述：</strong> 输入有序的字符串数组，以及前缀数组，判断每个前缀在数组中匹配的第一个字符串的索引,找不到返回-1<br>
看例子最直观<img class="emoji" draggable="false" alt="👇" src="https://twemoji.maxcdn.com/v/12.1.5/72x72/1f447.png"/>：</p>
<blockquote>
<p>array = [“apple”, “April”, “Bob”, “Nana”, “Zoey”]<br>
prefix = “a”     return 0<br>
prefix = “c”     return -1<br>
prefix = “Na”   return 3</p>
</blockquote>
<p><strong>思路</strong>：开始想的就是逐个遍历，后来突然看了一眼题目sorted Array，所以就使用二分查找，将时间复杂度降低到了<code>O(logn)</code>。</p>
<pre class=" language-language-javascript"><code class="language-language-javascript">function findIndex1(array, pre) {  
// 检查以pre为前缀的第一个字符串的索引   
let index = -1   
let len = pre.length   
for(let i = 0; i < array.length; i++){     
  if(array[i].slice(0,len) === pre){
         return i     
  }   
}   
  return index
}
function findIndex2(array, pre) {
  // 检查以pre为前缀的第一个字符串的索引
  let index = -1
  let len = pre.length   
  let left = 0   
  let right = array.length-1   
if(len === 0) return index   
while(left < right){
  // 使用二分查找
  let mid = left + Math.floor((right-left)/2)     
  if(mid === left || mid === right){
    break     
  }
  // 比较mid位置上字符串的前缀和pre的大小关系
  if(array[mid].slice(0,len) > pre){ // right左移
    right = mid - 1
  }else if(array[mid].slice(0,len) < pre){ // left右移
    left = mid + 1     
  }else{
    // mid处的string前缀恰好为pre不代表它一定是第一个匹配的string，还要向前检查
    while(array[mid-1].indexOf(pre) === 0){         
      mid --       
    }       
    index = mid
    break
  }     
  if(left === right){ return array[left].indexOf(pre) === 0 ? left : -1}   
  }   
  return index
}
</code></pre>
<h2 id="10、Leetcode-820-单词的压缩编码">10、Leetcode 820. 单词的压缩编码</h2>
<p><strong>思路一：插入预检法</strong>，类似题目出现的情况，当我们插入某个word时，需要确定他没有出现在前面的编码中<code>index = -1</code>，或者出现在编码中但不能正确读取<code>str[index+len]!='#'</code>，类似&quot;timer#“里面虽然出现了&quot;me”,但却无法正常读取。但是这种方法必须保证单词组的顺序是按照单词长度由大到小排列的，因为（若是“me”在“time”之前编码，我们插入预检的时候检测不到“time”编码，所以还会插入time#,导致结果&quot;me#time#&quot;不是最佳的编码方式）。概括来说，按照单词由长到短的顺序进行编码，时间复杂度<code>O(n*n)</code></p>
<pre class=" language-language-javascript"><code class="language-language-javascript">var miniumLengthEncoding = function(words){
  if(words.length === 0){
    return 0
  }
  // 按照长度对单词组排序
  words = words.sort((a,b) => { return a.length < b.length })
  // 初始化编码
  let resStr = words[0] + '#'
  for(let i = 1; i < words.length; i++){
    let index = resStr.indexOf(words[i])
    // 插入预检，不能正确读的时候才插入
    if(index === -1 || resStr[index+words[i].length] != '#'){
      resStr += words[i] + '#'
    }
  }
  return resStr.length
}
</code></pre>
<p>由于对数组进行了排序，所以方式一的时间复杂度偏高，此外不断更新编码串，其实没有必要，题目要求的不过是长度</p>
<p><strong>思路二：删除重复的词尾</strong>：和预检一样，删除重复词尾，就是为了降低编码的长度，所以如果str2是str1的某个词尾（后缀），那么我们只需要对str1进行编码即可，只需要计算 <code>len(strA)+1</code>, 所以在words数组中删除掉词尾重复的单词，剩下的单词总长度 ＋ 总个数 就是 最佳编码长度，即 <code>minLen = len(words) + lenSum(words[0],words[1]...word[len-1])</code>。具体实现：通过哈希表降低查询的复杂度（牺牲空间换时间），对words中的每个元素的词尾做切片对比，如果词尾出现在hashSet单词集中，就删除该元素。</p>
<pre class=" language-language-javascript"><code class="language-language-javascript">var minimumLengthEncoding = function(words){
  let hashSet = new Set(words)
  for(let item of hashSet){
    for(let i = 1; i < item.length; i++){
      // 切片，看看是否词尾出现在hashSet,是则删除
      let target = item.slice(i)
      hashSet.has(target) && hashSet.delete(target);
    }
  }
  let res = 0
  // 计算剩余字符串的总长度
  hashSet.forEach(item =>{ res += item.length + 1})
  return res
}
</code></pre>
<p>如下图，第一行是使用Hash的执行结果，第二行为先排序再预检的结果。相比之下，使用Hash大大降低了算法的时间复杂度。<br>
<img src="https://img-blog.csdnimg.cn/20200328094101647.png" alt="两种解法的执行结果对比"></p>

            </div>
            <hr/>

            

    <div class="reprint" id="reprint-statement">
        
            <div class="reprint__author">
                <span class="reprint-meta" style="font-weight: bold;">
                    <i class="fas fa-user">
                        Author:
                    </i>
                </span>
                <span class="reprint-info">
                    <a href="https://caseylu.gitee.io" rel="external nofollow noreferrer">Casey Lu</a>
                </span>
            </div>
            <div class="reprint__type">
                <span class="reprint-meta" style="font-weight: bold;">
                    <i class="fas fa-link">
                        Link:
                    </i>
                </span>
                <span class="reprint-info">
                    <a href="https://caseylu.gitee.io/2020/03/28/19-javascript-bi-shi-shua-ti-xiao-jie-si/">https://caseylu.gitee.io/2020/03/28/19-javascript-bi-shi-shua-ti-xiao-jie-si/</a>
                </span>
            </div>
            <div class="reprint__notice">
                <span class="reprint-meta" style="font-weight: bold;">
                    <i class="fas fa-copyright">
                        Reprint policy:
                    </i>
                </span>
                <span class="reprint-info">
                    All articles in this blog are used except for special statements
                    <a href="https://creativecommons.org/licenses/by/4.0/deed.zh" rel="external nofollow noreferrer" target="_blank">CC BY 4.0</a>
                    reprint polocy. If reproduced, please indicate source
                    <a href="https://caseylu.gitee.io" target="_blank">Casey Lu</a>
                    !
                </span>
            </div>
        
    </div>

    <script async defer>
      document.addEventListener("copy", function (e) {
        let toastHTML = '<span>Copied successfully, please follow the reprint policy of this article</span><button class="btn-flat toast-action" onclick="navToReprintStatement()" style="font-size: smaller">more</a>';
        M.toast({html: toastHTML})
      });

      function navToReprintStatement() {
        $("html, body").animate({scrollTop: $("#reprint-statement").offset().top - 80}, 800);
      }
    </script>



            <div class="tag_share" style="display: block;">
                <div class="post-meta__tag-list" style="display: inline-block;">
                    
                        <div class="article-tag">
                            
                                <a href="/tags/Javascript/">
                                    <span class="chip bg-color">Javascript</span>
                                </a>
                            
                                <a href="/tags/Leetcode/">
                                    <span class="chip bg-color">Leetcode</span>
                                </a>
                            
                                <a href="/tags/%E7%AE%97%E6%B3%95/">
                                    <span class="chip bg-color">算法</span>
                                </a>
                            
                        </div>
                    
                </div>
                <div class="post_share" style="zoom: 80%; width: fit-content; display: inline-block; float: right; margin: -0.15rem 0;">
                    <link rel="stylesheet" type="text/css" href="/libs/share/css/share.min.css">

<div id="article-share">
    
    
    <div class="social-share" data-sites="google,qq,qzone,wechat,weibo,douban,linkedin" data-wechat-qrcode-helper="<p>微信扫一扫即可分享！</p>"></div>
    <script src="/libs/share/js/social-share.min.js"></script>
    

    

</div>

                </div>
            </div>
            
                <style>
    #reward {
        margin: 40px 0;
        text-align: center;
    }

    #reward .reward-link {
        font-size: 1.4rem;
        line-height: 38px;
    }

    #reward .btn-floating:hover {
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    #rewardModal {
        width: 320px;
        height: 350px;
    }

    #rewardModal .reward-title {
        margin: 15px auto;
        padding-bottom: 5px;
    }

    #rewardModal .modal-content {
        padding: 10px;
    }

    #rewardModal .close {
        position: absolute;
        right: 15px;
        top: 15px;
        color: rgba(0, 0, 0, 0.5);
        font-size: 1.3rem;
        line-height: 20px;
        cursor: pointer;
    }

    #rewardModal .close:hover {
        color: #ef5350;
        transform: scale(1.3);
        -moz-transform:scale(1.3);
        -webkit-transform:scale(1.3);
        -o-transform:scale(1.3);
    }

    #rewardModal .reward-tabs {
        margin: 0 auto;
        width: 210px;
    }

    .reward-tabs .tabs {
        height: 38px;
        margin: 10px auto;
        padding-left: 0;
    }

    .reward-content ul {
        padding-left: 0 !important;
    }

    .reward-tabs .tabs .tab {
        height: 38px;
        line-height: 38px;
    }

    .reward-tabs .tab a {
        color: #fff;
        background-color: #ccc;
    }

    .reward-tabs .tab a:hover {
        background-color: #ccc;
        color: #fff;
    }

    .reward-tabs .wechat-tab .active {
        color: #fff !important;
        background-color: #22AB38 !important;
    }

    .reward-tabs .alipay-tab .active {
        color: #fff !important;
        background-color: #019FE8 !important;
    }

    .reward-tabs .reward-img {
        width: 210px;
        height: 210px;
    }
</style>

<div id="reward">
    <a href="#rewardModal" class="reward-link modal-trigger btn-floating btn-medium waves-effect waves-light red">赏</a>

    <!-- Modal Structure -->
    <div id="rewardModal" class="modal">
        <div class="modal-content">
            <a class="close modal-close"><i class="fas fa-times"></i></a>
            <h4 class="reward-title">谢谢大佬的小鱼干，喵~</h4>
            <div class="reward-content">
                <div class="reward-tabs">
                    <ul class="tabs row">
                        <li class="tab col s6 alipay-tab waves-effect waves-light"><a href="#alipay">支付宝</a></li>
                        <li class="tab col s6 wechat-tab waves-effect waves-light"><a href="#wechat">微 信</a></li>
                    </ul>
                    <div id="alipay">
                        <img src="/medias/reward/alipay.jpg" class="reward-img" alt="支付宝打赏二维码">
                    </div>
                    <div id="wechat">
                        <img src="/medias/reward/wechat.png" class="reward-img" alt="微信打赏二维码">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        $('.tabs').tabs();
    });
</script>
            
        </div>
    </div>

    
        <link rel="stylesheet" href="/libs/gitalk/gitalk.css">
<link rel="stylesheet" href="/css/my-gitalk.css">

<div class="card gitalk-card" data-aos="fade-up">
    <div class="comment_headling" style="font-size: 20px; font-weight: 700; position: relative; left: 20px; top: 15px; padding-bottom: 5px;">
        <i class="fas fa-comments fa-fw" aria-hidden="true"></i>
        <span>评论</span>
    </div>
    <div id="gitalk-container" class="card-content"></div>
</div>

<script src="/libs/gitalk/gitalk.min.js"></script>
<script>
    let gitalk = new Gitalk({
        clientID: 'b739596984975414aa79',
        clientSecret: 'c5792bc3376f951910111f232176fbadfa919286',
        repo: 'L0ittle.github.io',
        owner: 'L0ittle',
        admin: "L0ittle",
        id: '2020-03-28T09-48-02',
        distractionFreeMode: false  // Facebook-like distraction free mode
    });

    gitalk.render('gitalk-container');
</script>
    

    

    

    

    

    

<article id="prenext-posts" class="prev-next articles">
    <div class="row article-row">
        
        <div class="article col s12 m6" data-aos="fade-up">
            <div class="article-badge left-badge text-color">
                <i class="fas fa-chevron-left"></i>&nbsp;Previous</div>
            <div class="card">
                <a href="/2020/03/28/20-css-zhong-chang-jian-de-bu-ju-fang-shi/">
                    <div class="card-image">
                        
                        
                        <img src="/medias/articleimages/32.jpg" class="responsive-img" alt="CSS中常见的布局方式">
                        
                        <span class="card-title">CSS中常见的布局方式</span>
                    </div>
                </a>
                <div class="card-content article-content">
                    <div class="summary block-with-text">
                        
                            面试被问到了三列布局的实现，只回答出来了float、Position
三列布局
实现三列布局通常是两列定宽，一列自适应，在这里主要讲两侧定宽，中间自适应的布局：
浮动实现三列布局

float  + margin
使用float浮动实现，脱
                        
                    </div>
                    <div class="publish-info">
                        <span class="publish-date">
                            <i class="far fa-clock fa-fw icon-date"></i>2020-03-28
                        </span>
                        <span class="publish-author">
                            
                            <i class="fas fa-bookmark fa-fw icon-category"></i>
                            
                            <a href="/categories/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/" class="post-category">
                                    技术分享
                                </a>
                            
                            
                        </span>
                    </div>
                </div>
                
                <div class="card-action article-tags">
                    
                    <a href="/tags/CSS/">
                        <span class="chip bg-color">CSS</span>
                    </a>
                    
                </div>
                
            </div>
        </div>
        
        
        <div class="article col s12 m6" data-aos="fade-up">
            <div class="article-badge right-badge text-color">
                Next&nbsp;<i class="fas fa-chevron-right"></i>
            </div>
            <div class="card">
                <a href="/2020/03/20/18-qian-duan-tu-pian-de-yu-lan-shang-chuan-jia-zai-ji-xia-zai/">
                    <div class="card-image">
                        
                        
                        <img src="/medias/articleimages/18.jpg" class="responsive-img" alt="前端图片的预览和上传、加载及下载">
                        
                        <span class="card-title">前端图片的预览和上传、加载及下载</span>
                    </div>
                </a>
                <div class="card-content article-content">
                    <div class="summary block-with-text">
                        
                            对于前端开发而言，和图片打交道自然是家常便饭。曾经的项目开发之中，对图片的使用也经历过不少问题，cc最近准备延伸一下，全方位的探讨在前端的多种应用场景下的图片操作，从预览上传、加载到下载到本地，同时也会分析图片的处理方式并share一些和图
                        
                    </div>
                    <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2020-03-20
                            </span>
                        <span class="publish-author">
                            
                            <i class="fas fa-bookmark fa-fw icon-category"></i>
                            
                            <a href="/categories/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/" class="post-category">
                                    技术分享
                                </a>
                            
                            
                        </span>
                    </div>
                </div>
                
                <div class="card-action article-tags">
                    
                    <a href="/tags/Javascript/">
                        <span class="chip bg-color">Javascript</span>
                    </a>
                    
                    <a href="/tags/LazyLoad/">
                        <span class="chip bg-color">LazyLoad</span>
                    </a>
                    
                    <a href="/tags/Axios/">
                        <span class="chip bg-color">Axios</span>
                    </a>
                    
                </div>
                
            </div>
        </div>
        
    </div>
</article>

</div>


<script>
    $('#articleContent').on('copy', function (e) {
        // IE8 or earlier browser is 'undefined'
        if (typeof window.getSelection === 'undefined') return;

        var selection = window.getSelection();
        // if the selection is short let's not annoy our users.
        if (('' + selection).length < Number.parseInt('100')) {
            return;
        }

        // create a div outside of the visible area and fill it with the selected text.
        var bodyElement = document.getElementsByTagName('body')[0];
        var newdiv = document.createElement('div');
        newdiv.style.position = 'absolute';
        newdiv.style.left = '-99999px';
        bodyElement.appendChild(newdiv);
        newdiv.appendChild(selection.getRangeAt(0).cloneContents());

        // we need a <pre> tag workaround.
        // otherwise the text inside "pre" loses all the line breaks!
        if (selection.getRangeAt(0).commonAncestorContainer.nodeName === 'PRE') {
            newdiv.innerHTML = "<pre>" + newdiv.innerHTML + "</pre>";
        }

        var url = document.location.href;
        newdiv.innerHTML += '<br />'
            + 'From: Casey Lu&#39;s Blog<br />'
            + 'Author: Casey Lu<br />'
            + 'Link: <a href="' + url + '">' + url + '</a><br />'
            + '本文章著作权归作者所有，任何形式的转载都请注明出处。';

        selection.selectAllChildren(newdiv);
        window.setTimeout(function () {bodyElement.removeChild(newdiv);}, 200);
    });
</script>


<!-- 代码块功能依赖 -->
<script type="text/javascript" src="/libs/codeBlock/codeBlockFuction.js"></script>

<!-- 代码语言 -->

<script type="text/javascript" src="/libs/codeBlock/codeLang.js"></script>


<!-- 代码块复制 -->

<script type="text/javascript" src="/libs/codeBlock/codeCopy.js"></script>


<!-- 代码块收缩 -->

<script type="text/javascript" src="/libs/codeBlock/codeShrink.js"></script>


<!-- 代码块折行 -->

<style type="text/css">
code[class*="language-"], pre[class*="language-"] { white-space: pre !important; }
</style>


    </div>
    <div id="toc-aside" class="expanded col l3 hide-on-med-and-down">
        <div class="toc-widget">
            <div class="toc-title"><i class="far fa-list-alt"></i>&nbsp;&nbsp;TOC</div>
            <div id="toc-content"></div>
        </div>
    </div>
</div>

<!-- TOC 悬浮按钮. -->

<div id="floating-toc-btn" class="hide-on-med-and-down">
    <a class="btn-floating btn-large bg-color">
        <i class="fas fa-list-ul"></i>
    </a>
</div>


<script src="/libs/tocbot/tocbot.min.js"></script>
<script>
    $(function () {
        tocbot.init({
            tocSelector: '#toc-content',
            contentSelector: '#articleContent',
            headingsOffset: -($(window).height() * 0.4 - 45),
            collapseDepth: Number('0'),
            headingSelector: 'h2, h3, h4'
        });

        // modify the toc link href to support Chinese.
        let i = 0;
        let tocHeading = 'toc-heading-';
        $('#toc-content a').each(function () {
            $(this).attr('href', '#' + tocHeading + (++i));
        });

        // modify the heading title id to support Chinese.
        i = 0;
        $('#articleContent').children('h2, h3, h4').each(function () {
            $(this).attr('id', tocHeading + (++i));
        });

        // Set scroll toc fixed.
        let tocHeight = parseInt($(window).height() * 0.4 - 64);
        let $tocWidget = $('.toc-widget');
        $(window).scroll(function () {
            let scroll = $(window).scrollTop();
            /* add post toc fixed. */
            if (scroll > tocHeight) {
                $tocWidget.addClass('toc-fixed');
            } else {
                $tocWidget.removeClass('toc-fixed');
            }
        });

        
        /* 修复文章卡片 div 的宽度. */
        let fixPostCardWidth = function (srcId, targetId) {
            let srcDiv = $('#' + srcId);
            if (srcDiv.length === 0) {
                return;
            }

            let w = srcDiv.width();
            if (w >= 450) {
                w = w + 21;
            } else if (w >= 350 && w < 450) {
                w = w + 18;
            } else if (w >= 300 && w < 350) {
                w = w + 16;
            } else {
                w = w + 14;
            }
            $('#' + targetId).width(w);
        };

        // 切换TOC目录展开收缩的相关操作.
        const expandedClass = 'expanded';
        let $tocAside = $('#toc-aside');
        let $mainContent = $('#main-content');
        $('#floating-toc-btn .btn-floating').click(function () {
            if ($tocAside.hasClass(expandedClass)) {
                $tocAside.removeClass(expandedClass).hide();
                $mainContent.removeClass('l9');
            } else {
                $tocAside.addClass(expandedClass).show();
                $mainContent.addClass('l9');
            }
            fixPostCardWidth('artDetail', 'prenext-posts');
        });
        
    });
</script>

    

</main>



    <footer class="page-footer bg-color">
    
        <link rel="stylesheet" href="/libs/aplayer/APlayer.min.css">
<div class="">
    
    <div class="row">
        <meting-js class="col l8 offset-l2 m10 offset-m1 s12"
                   server="netease"
                   type="playlist"
                   id="4892766072"
                   fixed='true'
                   autoplay='false'
                   theme:='#42b983'
                   loop='all'
                   order='random'
                   preload='auto'
                   volume='0.7'
                   list-folded='true'
        >
        </meting-js>
    </div>
</div>

<script src="/libs/aplayer/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>

    
    <div class="container row center-align" style="margin-bottom: 0px !important;">
        <div class="col s12 m8 l8 copy-right">
            Copyright&nbsp;&copy;
            <span id="year">2020</span>
            <a href="https://caseylu.gitee.io" target="_blank">Casey Lu</a>
            |&nbsp;Powered by&nbsp;<a href="https://hexo.io/" target="_blank">Hexo</a>
            |&nbsp;Theme&nbsp;<a href="https://github.com/blinkfox/hexo-theme-matery" target="_blank">Matery</a>
            <br>
            
            &nbsp;<i class="fas fa-chart-area"></i>&nbsp;站点总字数:&nbsp;<span
                class="white-color">63.2k</span>&nbsp;字
            
            
            
            
            
            
            <span id="busuanzi_container_site_pv">
                |&nbsp;<i class="far fa-eye"></i>&nbsp;总访问量:&nbsp;<span id="busuanzi_value_site_pv"
                    class="white-color"></span>&nbsp;次
            </span>
            
            
            <span id="busuanzi_container_site_uv">
                |&nbsp;<i class="fas fa-users"></i>&nbsp;总访问人数:&nbsp;<span id="busuanzi_value_site_uv"
                    class="white-color"></span>&nbsp;人
            </span>
            
            <br>
            
            <br>
            
        </div>
        <div class="col s12 m4 l4 social-link social-statis">
    <a href="https://github.com/L0ittle" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50">
        <i class="fab fa-github"></i>
    </a>



    <a href="mailto:caseylu119@163.com" class="tooltipped" target="_blank" data-tooltip="邮件联系我" data-position="top" data-delay="50">
        <i class="fas fa-envelope-open"></i>
    </a>







    <a href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=1351238945" class="tooltipped" target="_blank" data-tooltip="QQ联系我: 1351238945" data-position="top" data-delay="50">
        <i class="fab fa-qq"></i>
    </a>







    <a href="/atom.xml" class="tooltipped" target="_blank" data-tooltip="RSS 订阅" data-position="top" data-delay="50">
        <i class="fas fa-rss"></i>
    </a>

</div>
    </div>
</footer>

<div class="progress-bar"></div>


    <!-- 搜索遮罩框 -->
<div id="searchModal" class="modal">
    <div class="modal-content">
        <div class="search-header">
            <span class="title"><i class="fas fa-search"></i>&nbsp;&nbsp;Search</span>
            <input type="search" id="searchInput" name="s" placeholder="Please enter a search keyword"
                   class="search-input">
        </div>
        <div id="searchResult"></div>
    </div>
</div>

<script src="/js/search.js"></script>
<script type="text/javascript">
$(function () {
    searchFunc("/" + "search.xml", 'searchInput', 'searchResult');
});
</script>
    <!-- 回到顶部按钮 -->
<div id="backTop" class="top-scroll">
    <a class="btn-floating btn-large waves-effect waves-light" href="#!">
        <i class="fas fa-arrow-up"></i>
    </a>
</div>


    <script src="/libs/materialize/materialize.min.js"></script>
    <script src="/libs/masonry/masonry.pkgd.min.js"></script>
    <script src="/libs/aos/aos.js"></script>
    <script src="/libs/scrollprogress/scrollProgress.min.js"></script>
    <script src="/libs/lightGallery/js/lightgallery-all.min.js"></script>
    <script src="/js/matery.js"></script>

    <!-- Global site tag (gtag.js) - Google Analytics -->


    <!-- Baidu Analytics -->

    <!-- Baidu Push -->

<script>
    (function () {
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        } else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>

    
    <script src="/libs/others/clicklove.js" async="async"></script>
    
    
    <script async src="/libs/others/busuanzi.pure.mini.js"></script>
    

    

    

    

    

    
    
    
    <script src="/libs/instantpage/instantpage.js" type="module"></script>
    

</body>

</html>
